<template>
  <div class="content">
    <div class="content_head">
      <el-button type="danger" size="mini" @click="delAll">删除</el-button>
    </div>
    <el-table
      @selection-change="handleSelectionChange"
      :data="tableData"
      border
      style="width:100%;margin-top:20px"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="id">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="登陆用户">
        <template slot-scope="scope">
          <span>{{ scope.row.managementNickname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="登录时间">
        <template slot-scope="scope">
          <span>{{ getDate(scope.row.loginTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="登陆IP">
        <template slot-scope="scope">
          <span>{{ scope.row.loginIp }}</span>
        </template>
      </el-table-column>
      <el-table-column label="登陆地址">
        <template slot-scope="scope">
          <span>{{ scope.row.loginAddress }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="danger" size="mini" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page="index"
        :page-size="pageSize"
        :page-sizes="[10,20]"
        layout="total,sizes,prev, pager, next,jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { loginLog, delLog } from "@/api/login.js";
import { getDate } from "@/utils/dateUtil.js";
export default {
  data() {
    return {
      total: 0,
      pageSize: 10,
      index: 1,
      tableData: [],
      ids: []
    };
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    handleSelectionChange(data) {
      this.ids = data.map((item, index, arr) => item.id);
    },
    delAll() {
      this.$confirm("此操作将删除选中数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          delLog(this.ids).then(() => {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.getTableData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    del(id) {
      let arr = [];
      arr.push(id);
      this.$confirm("此操作将删除选中数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          delLog(arr).then(() => {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.getTableData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    getDate(time) {
      return getDate(time);
    },
    getTableData() {
      loginLog(this.index, this.pageSize).then(res => {
        this.tableData = res.data.records;
        this.total = res.data.total;
      });
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.getTableData();
    },
    handleCurrentChange(page) {
      this.index = page;
      this.getTableData();
    }
  }
};
</script>
<style scoped>
.content {
  display: flex;
  flex-direction: column;
}
.content_head {
  display: flex;
}
.page {
  width: 100%;
  display: flex;
  justify-content: center;
  height: 100px;
  align-items: center;
}
</style>